<template>
    <!-- <h2>商品</h2> -->
    <div class="content">
        <ul class="left">
            <li v-for="item, index in tab " :key="item.name">
                <a :href="'#' + index" name="box">{{ item.name }}</a>
            </li>
        </ul>

        <div class="cartGoods">
            <div v-for="(item, index) in list" :key="item.name">

                <div class="type" :id="index" name="box">{{ item.name }}</div>
                <div class="main" v-for="(food, index) in item.foods" :key="food.index">
                    <img :src="food.image" alt="">
                    <div class="right">
                        <p class="p1">{{ food.name }}</p>
                        <p class="p2">{{ food.description }}</p>
                        <span>月售{{ food.sellCount }}份</span>
                        <span>好评率{{ food.rating }}%</span>
                        <div class="pri">
                            <span class="price">￥{{ food.price }}</span>
                            <span><del>￥{{ food.oldPrice }}</del></span>
                        </div>

                        <div class="add">
                            <button v-show="food.count > 0" @click="[ NumSub(food)]">-</button>
                            <span v-show="food.count > 0">{{ food.count }}</span>
                            <button @click="[NumAdd(food), setCarList(food)]">+</button>

                        </div>

                    </div>

                </div>

            </div>
        </div>   
        
        
    </div>
    <div class="showCart" v-show="show === true">
        <div class="mask"></div>
        <div class="fs">
            <h4 >
                <span>购物车</span>
                <span @click="numNull()">清空</span>
            </h4>
            
            <ol> 
                <li v-for=" item in carList ">
                    <span>{{item.name}} </span>
                    <div>
                        <span>￥{{ item.count*item.price }}</span>
                        <button class="btn1" @click="NumSub(item)">-</button>
                        <span>{{ item.count }}</span>
                        <button @click="NumAdd(item)">+</button>
                    </div>
                </li>
            </ol>
            <div class="tips" v-if="carList.length === 0 ">您还没有添加商品，请您先去添加商品!!</div>
        </div>
    
    </div>
    
    <div class="bottom">
        <img src="https://s1.chu0.com/src/img/png/21/21ae333851604e70a34d41c44cec4747.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:CoQ0Axjy9Y0FB1by-pD7QigL47Y="
            alt="" :class="{aaa:show===true}" @click="setShow()">
    
        <div>
            <span>￥{{ getPrice }}</span>
            <span>另需配送费￥4元</span>
            <span>￥20起送</span>
        </div>
    
    
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            tab: [],
            list: [],
            goods: {},  // 商家列表数据             
            show: false,  // 是否显示购物车列表
            carList: [],  // 购物车列表数据
            allPrice: 0,   // 总价
        }
    },
    created() {
        axios.get("http://localhost:8088/list").then((res) => {
            // console.log(res);
            this.tab = res.data.goods;
            // console.log( this.tab );
        });

        this.getData()

    },
    computed:{
        cartNum(){
           
        },
        getPrice() {
            let num = 0;
            this.carList.forEach((item) => {
                num += item.price * item.count;
            });
            // console.log(num);
            this.allPrice = num;
            // console.log( this.allPrice )
            return this.allPrice;
        },
    },
    methods: {

        async getData() {
            const { data } = await axios.get("http://localhost:8088/list")
            // console.log(data)
            this.list = data.goods
            // console.log(this.list)
        },
        NumSub(food) {
            if (food.count > 0) {
                food.count--;
            }
            let index = this.carList.findIndex(( item )=>{
                return item.name===food.name ;
            });
            if( food.count < 1 ){
                this.carList.splice( index , 1 )
            }
            console.log(index);
        },
        NumAdd(food) {
            // console.log(food)
            if (!food.count) {
                food.count = 1;
            } else {
                food.count++;
            }
            // console.log(this.carList,"--------------")

        },
        setCarList(food) {
            // console.log(food)
            const hasItem = this.carList.findIndex((item) => {
                return food.name === item.name
            });
            // console.log( hasItem );

            if (hasItem == "-1") {
                this.carList.push( food );
            }
            // console.log( this.carList );
        },
        showCar() {
            this.show = !this.show;
        },
        setShow(){
        this.show = !this.show ;
       },
       numNull(){
        this.carList.forEach((item) => {
            item.count = 0;
        })
        this.carList = [];
        
       }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

ul,
ol,
li {
    list-style: none;
}

html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

html,
body {
    overflow: hidden;
}

a {
    text-decoration: none;
}
.aaa{
    background-color: aqua !important;
    color: white;
}
.content {
    display: flex;
    background: #f3f5f7;
    position: relative;
}

.content>.left {
    width: 21.333vw;
    font-size: 3.2vw;
    color: gray;
    font-weight: 200;

    background: rgba(255, 255, 255, 0.4);
    margin-right: 2.667vw;
}

.left>li {
    width: 100%;
    height: 13.2vw;
    line-height: 14.4vw;
    text-align: center;
    border-bottom: 0.133vw solid gray;
    flex: 1;

}

.left>li:hover {
    color: black;
    background: white;
    font-weight: bold;
}

.cartGoods{
    height: 134.933vw;
    background-color: rgba(255,255,255,0.3);
    overflow-y: scroll;
}

.type {
    font-size: 3.467vw;
    padding: 1.6vw 1.6vw;
    color: gray;
    background: rgba(255, 255, 255, 0.3);
}

.main {
    height: 26.667vw;
    background: white;
    padding: 4.8vw;
    border-bottom: 0.133vw solid gray;
    position: relative;
}

.main img {
    width: 26.667vw;
    height: 26.667vw;
    float: left;
    margin-right: 2.667vw;
}

.main .right {
    font-size: 2.933vw;
    color: gray;

}

.main .right>span {
    padding-right: 1.333vw;
}

.main .right p {
    padding-bottom: 0.8vw;
}

.main .p1 {
    font-size: 3.733vw;
    font-weight: bold;
    color: black;
}

.main .p2 {
    font-size: 2.133vw;
}

.main .right .pri .price {
    font-size: 3.2vw;
    font-weight: bold;
    color: red;
    padding-right: 2.133vw;
}

.main .pri {
    float: left;
    margin-top: 2vw;
}

.add {
    float: right;
    color: gray;
    line-height: 6.4vw;
    font-size: 4vw;
    /* border: 1px solid gray; */
    margin-top: 1.067vw;
}

.add button {
    width: 5.067vw;
    height: 5.067vw;
    color: white;
    font-size: 4.533vw;
    text-align: center;
    line-height: 3.067vw;
    border: 0.133vw solid gray;
    border-radius: 50%;
    background: rgb(0, 160, 220);
    border: 3px solid rgb(0, 160, 220);;
}
.add button:nth-child(1){
    background: white;
    color: rgb(0, 160, 220);
}

.add>span {
    padding: 0 1.6vw;
}

.showCart{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.showCart .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7, 17, 27, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2;
}
.showCart>div{
    position: relative;
    z-index: 3;
}
.showCart>.fs{
    width: 100vw;
    height: 86vw;
    background: white;
    position: absolute;
    top: 89vw;
    left: 0vw;
    position: relative;
}
.tips{
    width: 80vw;
    height: 16vw;
    font-size: 4.4vw;
    line-height: 16vw;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    /* background-color: red; */
    margin-top: -8vw;
    margin-left: -40vw;
}
.fs>h4{
    width: 95%;
    height: 10.667vw;
    background: rgb(212, 211, 209);
    border-bottom: 2px solid gray;
    font-size: 3.733vw;
    line-height: 10.667vw;
    display: flex;
    justify-content: space-between;
    padding-left:4.8vw;
    /* z-index: 200; */
}
.fs>h4>span:nth-child(2){
    font-size: 3.4vw;
    color: rgb(0,160,220);
    padding-right: 5%;
}
ol{
    width: 100%;
    height: 75.333vw;
    overflow: scroll;
}
ol>li{
    widows: 100%;
    height: 10.667vw;
    font-size: 3.733vw;
    color: rgb(7, 17, 27);
    border-bottom: 1px solid gray;
    background: white;
    padding: 3.2vw 4.8vw;
    /* text-align: center; */
    line-height: 10.667vw;
    display: flex;
    justify-content: space-between;
    /* overflow: scroll; */
}
ol>li>div{
    width: 40vw;
    height: 10.667vw;
    /* border: 0.133vw solid gray; */
    line-height: 10.667vw;
    font-size: 2.667vw;
    
}
ol>li>div>span{
    padding: 0 3.2vw;
    text-align: center;
    font-size: 3.2vw;
}
ol>li>div>span:first-child{
    font-size: 3.733vw;
    font-weight: 700;
    color: rgb(240,20,20);
}
ol div>button{
    width: 5.067vw;
    height: 5.067vw;
    color: white;
    font-size: 4.533vw;
    text-align: center;
    line-height: 4.067vw;
    border: 0.133vw solid gray;
    border: 3px solid rgb(0, 160, 220);
    border-radius: 50%;
    background: rgb(0, 160, 220);
}
ol div>.btn1{
    background: white;
    color: rgb(0, 160, 220);
}

.bottom{
    width: 100%;
    height: 13.333vw;
    /* background: #141d27; */
    background: black;
    position: relative;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
}
.tab{
    flex: 1;
    background: red;
    overflow: hidden;
}
.bottom img{
    width: 6.667vw;
    height: 6.667vw;
    border: 1.6vw solid black;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    padding: 1.333vw;
    margin-right: 4.8vw;
    float: left;
    position: absolute;
    left: 4.8vw;
    top: -2.667vw;
}
.bottom img:active{
    background: deepskyblue;
}
.bottom span{
    font-size: 3.2vw;
    color: gray;
    line-height: 13.333vw;
}
.bottom span:nth-child(1){
    padding-left: 24vw;
    padding-right: 3.2vw;
    font-size: 4.267vw;
    font-weight: 700;
    border-right: 0.133vw solid gray;
    margin-right: 3.2vw;

}
.bottom span:nth-child(3){
    width: 30%;
    height: 100%;
    font-size: 3.733vw;
    font-weight: 700;
    float: right;
    background: rgba(255,255,255,0.3);
    text-align: center;
}


</style>